{extend name="public/nav" /}
{block name="title"} 档案管理系统 {/block}

{block name="content"}
<style>
    html,body{
        height: 100%;
    }
    input{
        border: none;
    }
    .layui-input-block{
        margin-left: 0px;
    }
    #img img{
        width: 120px;
        height: 120px;
        border-radius: 250px;
    }
    .layui-btn-color{
        background-color: transparent;
        color: #2D93CA;
        font-weight: bold;
        display: block;
        width: 100%;
        border: 1px solid #1296db;
    }
    #rulesData{
        background-color: #fff;
        padding: 10px 0;
    }
    .layui-form-checked[lay-skin=primary] i{
        border-color: #1296db!important;
        background-color: #1296db;
        color: #fff;
    }
</style>
<div class="site-content" style="background-color: #cccccc;">
    <div class="site-h1">
        <i class="layui-icon layui-icon-left" onclick="window.history.back(-1)"></i>分配权限
    </div>
    <div class="layui-container">
        <div class="site-text" style="margin-top: 30px;">
            <form class="layui-form" method="post">
                <input type="hidden" name="id" value="{$field.id}">
                <div class="layui-form-item">
                    <div>角色名</div>
                    <div class="layui-input-block">
                        <input type="text" name="group_name" disabled value="{$field.group_name}" required lay-verify="required"
                            placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <input type="hidden" name="group_rules_old" value="{$field.group_rules}">
                <div class="layui-form-item">
                    <div>权限分配</div>
                    <div class="layui-input-block" id="rulesData">
                        
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-color" lay-submit lay-filter="edit">保存</button>
                    </div>
                </div>
            </form>

            <script type="text/javascript">
                layui.use(['form', 'upload', 'jquery','tree'], function () {
                    var form = layui.form,
                     upload = layui.upload, 
                     layer = layui.layer, 
                     $ = layui.jquery, 
                     tree = layui.tree;
                     var id = $('input[name=id]').val();
                     var group_rules_old = $('input[name=group_rules_old]').val();
                     $.post('{:url("index/api/treeData")}', {id: id, group_rules_old: group_rules_old}, function (res) {
                        //初始二叉树列表
                        tree.render({
                            elem: '#rulesData'  //绑定元素
                            , id: 'rulesId'    //索引编号，对这个tree进行其他操作时要用到
                            , data: res.data  //ajax请求的二叉树指定格式的数据
                            , showCheckbox: true   //开启复选框
                            , showLine: true   //开启层级线条指示
                            , text: {   //无数据节点时的提示
                                defaultNodeName: 'group_rules' //节点默认名称
                                , none: '无数据' //数据为空时的提示文本
                            }
                        });
                        //进行制定分配功能的选中和非选中
                        $.post('{:url("index/api/notParentRules")}',{nodeStr: group_rules_old},function(resData){
                            tree.setChecked('rulesId', resData.data);
                        },'json');
                    }, 'json');
                    //提交
                    form.on('submit(edit)', function (data) {
                        var arr_box = [];
                        $('input[type=checkbox]:checked').each(function () {
                            arr_box.push($(this).val());
                        });
                        data.field.group_rules = arr_box.join(",");
                        $.post('{:url("index/group/allocation")}', data.field, function (res) {
                            if (res.code == 0) {
                                layer.msg('分配成功', { icon: 6, time: 1000 }, function () {
                                    window.location.href = '{:url("index/group/index")}';
                                })
                            } else {
                                layer.msg('分配失败');
                            }
                        }, 'json');
                        return false;
                    });
                })
            </script>
        </div>
    </div>
</div>
{/block}